<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="zh">
    <%@include file="/lyear/common/head.jsp"%>
<body>

<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <%@include file="/lyear/common/aside.jsp" %>
        <!--End 左侧导航-->

        <!--头部信息-->
        <%@include file="/lyear/common/top.jsp" %>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" id="formId" method="get" action="${pageContext.request.contextPath}/user/getUserByCondition/1/10" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="searchKey" id="search_key" value="nickname">

                                            <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                <c:if test="${searchKey==null || searchKey=='nickname'}">
                                                    昵称 <span h="nickname"></span>
                                                </c:if>
                                                <c:if test="${searchKey=='account'}">
                                                    登录名 <span h="account"></span>
                                                </c:if>
                                                <c:if test="${searchKey=='email'}">
                                                    邮箱 <span h="email"></span>
                                                </c:if>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a tabindex="-1" href="javascript:void(0)" data-field="nickname">昵称</a></li>
                                                <li><a tabindex="-1" href="javascript:void(0)" data-field="account">登录名</a></li>
                                                <li><a tabindex="-1" href="javascript:void(0)" data-field="email">邮箱</a></li>
                                            </ul>
                                        </div>

                                       <c:if test="${status==null}">
                                       <input type="hidden" name="s" id="status" value="4">
                                       </c:if>
                                       <c:if test="${status!=null}">
                                           <input type="hidden" name="s" id="status" value="${status}">

                                       </c:if>

                                        <input type="text" class="form-control" id="search-value" value="${searchValue}" name="searchValue" placeholder="请输入" onkeydown="selectUserByCondition()">
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo"><i class="mdi mdi-plus"></i>新增</button>
                                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="exampleModalLabel">新增用户</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="userRegistForm">
                                                        <div class="form-group has-feedback feedback-left">
                                                            <input type="text" id="account" placeholder="登录名"  class="form-control" name="account" id="account" onblur="checkAccount()"/>
                                                            <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                                                            <div id="account_prompt" style="color:red"></div>
                                                        </div>
                                                        <div class="form-group has-feedback feedback-left">
                                                            <input type="text" id="email" placeholder="邮箱" class="form-control"  name="email" id="email" onblur="checkEmail()"/>
                                                            <span class="mdi mdi-email form-control-feedback" aria-hidden="true"></span>
                                                            <div id="email_prompt" style="color:red"></div>
                                                        </div>
                                                        <div class="form-group has-feedback feedback-left">
                                                            <input type="password" placeholder="密码" class="form-control" id="password1"  name="password" onblur="checkPassword1()"/>
                                                            <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                                                            <div id="password1_prompt" style="color:red"></div>
                                                        </div>
                                                        <div class="form-group has-feedback feedback-left">
                                                            <input type="password" placeholder="确认密码" class="form-control" id="password2" onblur="checkPassword2()"/>
                                                            <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                                                            <div id="password2_prompt" style="color:red"></div>
                                                        </div>
                                                        <div class="form-group has-feedback feedback-left">
                                                             <button id="submit" class="btn btn-block btn-primary" type="button" onclick="regist()">确认新增</button>
                                                        </div>
                                                    </form>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2" data-whatever="@mdo"><i class="mdi mdi-plus"></i>批量新增</button>
                                    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title" id="exampleModalLabel2">批量新增</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="userRegistForm11"  enctype="multipart/form-data">
                                                        <div class="form-group has-feedback feedback-left">
                                                            <input type="file" name="userFiles" id="usersPath" value="">
<%--                                                            <table>请输入xlsx文件磁盘根路径</table><input type="text" id="usersPath">--%>
                                                        </div>
                                                        <div class="form-group has-feedback feedback-left">
                                                            <button id="sub2" class="btn btn-block btn-primary" type="button" onclick="registUsers()">确认新增</button>
                                                        </div>
                                                    </form>
                                                </div>

                                            </div>
                                        </div>
                                    </div>


                                    <a class="btn btn-success m-r-5" href="#!" onclick="activeUsers()"><i class="mdi mdi-check"></i> 启用</a>
                                    <a class="btn btn-warning m-r-5" href="#!" onclick="disabledUsers()"><i class="mdi mdi-block-helper"></i> 禁用</a>
                                    <a class="btn btn-danger" href="#!"  onclick="deleteUsers()"><i class="mdi mdi-window-close" ></i> 删除</a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-success" role="alert" style="display: none;" id="resSuccessDiv"></div>
                                <div class="alert alert-danger" role="alert" style="display: none;" id="resFailDiv"></div>

                                <div class="table-responsive" >
                                    <table class="table table-bordered" style="text-align: center;">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary"><input type="checkbox" id="check-all"><span></span></label>
                                            </th>
                                            <th style="text-align: center;">编号</th>
                                            <th style="text-align: center;">昵称</th>
                                            <th style="text-align: center;">头像</th>
                                            <th style="text-align: center;">登录名</th>
                                            <th style="text-align: center;">邮箱</th>
                                            <th style="text-align: center;">微信</th>
                                            <th style="text-align: center;">状态
                                            <select style="border: 0;" id="select">
                                                <c:if test="${status=='0'}">
                                                    <option value ='4'>全部</option>
                                                    <option value ='0' selected >正常</option>
                                                    <option value ='1' >禁用</option>
                                                    <option value='2' >删除</option>
                                                    <option value='3' >未激活</option>
                                                </c:if>
                                                <c:if test="${status=='1'}">
                                                    <option value ='4'>全部</option>
                                                    <option value ='0'  >正常</option>
                                                    <option value ='1' selected>禁用</option>
                                                    <option value='2' >删除</option>
                                                    <option value='3' >未激活</option>
                                                </c:if>
                                                <c:if test="${status=='2'}">
                                                    <option value ='4'>全部</option>
                                                    <option value ='0'  >正常</option>
                                                    <option value ='1' >禁用</option>
                                                    <option value='2' selected>删除</option>
                                                    <option value='3' >未激活</option>
                                                </c:if>
                                                <c:if test="${status=='3'}">
                                                    <option value ='4'>全部</option>
                                                    <option value ='0' >正常</option>
                                                    <option value ='1' >禁用</option>
                                                    <option value='2' >删除</option>
                                                    <option value='3' selected>未激活</option>
                                                </c:if>
                                                <c:if test="${status==null||status=='4'}">
                                                    <option value ='4' selected>全部</option>
                                                    <option value ='0'  >正常</option>
                                                    <option value ='1' >禁用</option>
                                                    <option value='2' >删除</option>
                                                    <option value='3' >未激活</option>
                                                </c:if>

                                            </select>
                                            </th>
                                            <th style="text-align: center;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        <c:forEach items="${pageBean.result}" var="user">
                                            <tr>
                                                <td>
                                                    <label class="lyear-checkbox checkbox-primary">
                                                        <input type="checkbox" name="ids[]" value="${user.id}"><span></span>
                                                        <input type="checkbox" name="status[]" value="${user.status}">
                                                    </label>
                                                </td>
                                                <td>${user.id}</td>
                                                <td>${user.nickname}</td>
                                                <td>
                                                    <img src="${user.avatar}" height="100px" width="100px">
                                                </td>
                                                <td>${user.account}</td>
                                                <td>${user.email}</td>
                                                <td>${user.wechat}</td>
                                                <td>
                                                    <c:if test="${user.status==0}">
                                                        <span style="color: #0FB25F;">正常</span>
                                                    </c:if>
                                                    <c:if test="${user.status==1}">
                                                        <span style="color: yellow;">禁用</span>
                                                    </c:if>
                                                    <c:if test="${user.status==2}">
                                                        <span style="color: red;">删除</span>
                                                    </c:if>
                                                    <c:if test="${user.status==3}">
                                                        <span style="color: orange;">未激活</span>
                                                    </c:if>
                                                </td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" href="${pageContext.request.contextPath}/user/getInfoById/${user.id}" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                        <a class="btn btn-xs btn-default" href="${pageContext.request.contextPath}/user/getById/${user.id}" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                                                        <a class="btn btn-xs btn-default" href="#!" title="删除" data-toggle="tooltip">
                                                            <i class="mdi mdi-window-close" onclick="deleteUser(${user.id},${user.status})"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>

                                <%-- 分页--%>
                                <%@include file="/lyear/common/page.jsp" %>
                                <!--End 分页-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>


<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/main.min.js"></script>
<!--对话框-->
<script src="${pageContext.request.contextPath}/lyear/js/jconfirm/jquery-confirm.min.js"></script>

<script type="text/javascript">
     /**
      *  启用：必须所选全部为禁用状态，才可启用
      * */
    function activeUsers(){
        let userId=[];
        let status = [];
        $("input[name='ids[]']:checked").each(function(){
            userId.push($(this).val());
            status.push($(this).next().next().val());
        })
         let statusYes1=0;
         for (let i = 0; i < status.length; i++) {
             if (status[i]!=1){
                 statusYes1++;
             }
         }
         if (statusYes1!=0){
             $.confirm({
                 title: '温馨提示',
                 content: '请选择禁用状态的用户',
                 type: 'orange',
                 typeAnimated: false,
                 buttons: {
                     close: {
                         text: '关闭',
                     }
                 }
             });
             return;
         }
        if (userId.length==0){
            $.confirm({
                title: '温馨提示',
                content: '请添加需要启用的用户',
                type: 'orange',
                typeAnimated: false,
                buttons: {
                    close: {
                        text: '关闭',
                    }
                }
            });
            return;
        }
        $.confirm({
            title: '启用用户',
            content: '确认启用吗？',
            type:'red',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function () {
                        $.ajax({
                            url: "${pageContext.request.contextPath}/user/activeById/" + userId,
                            type:"POST",
                            success: function (res) {
                                if (res.code == 200) {
                                    $("#resSuccessDiv").css("display", "block");
                                    $("#resSuccessDiv").text(res.msg).delay(3000).hide(300);
                                    setTimeout("location.reload()",3000);
                                }
                                if (res.code == 500) {
                                    $("#resFailDiv").css("display", "block");
                                    $("#resFailDiv").text(res.msg);
                                }
                            },
                            dataType: 'json'
                        })
                    }
                },
                cancel: {
                    text: '取消'
                }
            }
        });
    };
    /**
     *  禁用：必须所选全部为正常状态，才可禁用
     * */
    function disabledUsers(){
        let userId=[];
        let status = [];
        $("input[name='ids[]']:checked").each(function(){
            userId.push($(this).val());
            status.push($(this).next().next().val());
        })
        let statusYes0=0;
        for (let i = 0; i < status.length; i++) {
            if (status[i]!=0){
                statusYes0++;
            }
        }
        if (statusYes0!=0){
            $.confirm({
                title: '温馨提示',
                content: '请选择正常状态的用户',
                type: 'orange',
                typeAnimated: false,
                buttons: {
                    close: {
                        text: '关闭',
                    }
                }
            });
            return;
        }
        if (userId.length==0){
            $.confirm({
                title: '温馨提示',
                content: '请添加需要禁用的用户',
                type: 'orange',
                typeAnimated: false,
                buttons: {
                    close: {
                        text: '关闭',
                    }
                }
            });
            return;
        }
        $.confirm({
            title: '禁用用户',
            content: '确认禁用吗？',
            type: 'red',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function () {
                        $.ajax({
                            url: "${pageContext.request.contextPath}/user/disabledById/" + userId,
                            type:"POST",
                            success: function (res) {
                                if (res.code == 200) {
                                    $("#resSuccessDiv").css("display", "block");
                                    $("#resSuccessDiv").text(res.msg).delay(3000).hide(300);
                                    setTimeout("location.reload()",3000);
                                }
                                if (res.code == 500) {
                                    $("#resFailDiv").css("display", "block");
                                    $("#resFailDiv").text(res.msg);
                                }
                            },
                            dataType: 'json'
                        })
                    }
                },
                cancel: {
                    text: '取消'
                }
            }
        });
    };
    /**
     * 删除：所选必须为正常或者禁用才可删除，如果状态为删除不可再删除
     * */
    function deleteUsers(){
        let userId=[];
        let status = [];
        $("input[name='ids[]']:checked").each(function(){
            userId.push($(this).val());
            status.push($(this).next().next().val());
        })
        let statusYes2=false;
        for (let i = 0; i < status.length; i++) {
            if (status[i]==2){
                statusYes2 = true;
                break;
            }

        }
        if (statusYes2){
            $.confirm({
                title: '温馨提示',
                content: '选择的有已删除状态的用户',
                type: 'orange',
                typeAnimated: false,
                buttons: {
                    close: {
                        text: '关闭',
                    }
                }
            });
            return;
        }
        if (userId.length==0){
            $.confirm({
                title: '温馨提示',
                content: '请添加需要删除的用户',
                type: 'orange',
                typeAnimated: false,
                buttons: {
                    close: {
                        text: '关闭',
                    }
                }
            });
            return;
        }
       $.confirm({
            title: '删除用户',
            content: '确认删除吗？',
            type: 'red',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function () {
                        $.ajax({
                            url: "${pageContext.request.contextPath}/user/removeById/" + userId,
                            type: "DELETE",
                            success: function (res) {
                                if (res.code == 200) {
                                    $("#resSuccessDiv").css("display", "block");
                                    $("#resSuccessDiv").text(res.msg).delay(3000).hide(300);
                                    setTimeout("location.reload()",3000);
                                }
                                if (res.code == 500) {
                                    $("#resFailDiv").css("display", "block");
                                    $("#resFailDiv").text(res.msg);
                                }
                            },
                            dataType: 'json'
                        })
                    }
                },
                cancel: {
                    text: '取消'
                }
            }
        });
    };
    /**
     * 操作单个删除
     * */
    function deleteUser(userId,sts) {
        if (sts==2){
            $.confirm({
                title: '温馨提示',
                content: '该用户已被删除',
                type: 'orange',
                typeAnimated: false,
                buttons: {
                    close: {
                        text: '关闭',
                    }
                }
            });
            return;
        }
        $.confirm({
            title: '删除用户',
            content: '确认删除吗？',
            type: 'red',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function () {
                        $.ajax({

                            url: "${pageContext.request.contextPath}/user/removeById/" + userId,
                            type: "DELETE",
                            success: function (res) {
                                if (res.code == 200) {
                                    $("#resSuccessDiv").css("display", "block");
                                    $("#resSuccessDiv").text(res.msg).delay(3000).hide(300);
                                    setTimeout("location.reload()",3000);
                                }
                                if (res.code == 500) {
                                    $("#resFailDiv").css("display", "block");
                                    $("#resFailDiv").text(res.msg);
                                }

                            },
                            dataType: 'json'
                        })

                    }

                },
                cancel: {
                    text: '取消'
                }
            }
        });
    };

    function selectUserByCondition(e) {
        let evt = window.event || e;
        if (evt.keyCode == 13) { //回车事件
            $('#formId').submit();//处理事件
            <%--$.get("${pageContext.request.contextPath}/user/getUserByCondition/1/10");--%>
        }
    }

    $(function () {
        $('.search-bar .dropdown-menu a').click(function () {
            let field = $(this).data('field') || '';
            $('#search_key').val(field);
            $('#search-btn').html($(this).text() + '<span h="' + field + '"></span>');
        });
    });

    let accountRes = false;

    /**
     * 验证账户
     * @returns {boolean}
     */
    function checkAccount() {
        let account = $("#account").val();
        let userPromptDiv = $("#account_prompt");
        let reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        if (reg.test(account) == false) {
            userPromptDiv.html("以字母开头的英文字母和数字组成的4-16位字符").css("color","red").show();
            accountRes = false;
        } else {
            //userPromptDiv.hide(1500);
            $.ajax({
                url:"${pageContext.request.contextPath}/account/selectUserByAccount",
                data: {"account": account},
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.code == 500) {
                        accountRes = false;
                        userPromptDiv.html(res.msg).css("color","red").show();
                    } else {
                        accountRes = true;
                        userPromptDiv.html(res.msg).css("color","green").hide(2000);
                    }
                }
            })
        }
        return accountRes;
    }

    let emailRes = false;

    /**
     * 验证邮箱
     */
    function checkEmail() {
        let email = $("#email").val();
        let emailPromptDiv = $("#email_prompt");
        let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (reg.test(email) == false) {
            emailPromptDiv.html("邮件格式不正确").show();
            emailRes = false;
        } else {
            emailPromptDiv.hide(1500);
            emailRes = true;
        }
        return emailRes;
    }

    let password1Res =false;
    /**
     * 验证密码
     * */
    function checkPassword1() {
        let password1 = $("#password1").val();
        let password1PromptDiv = $("#password1_prompt");
        let reg = /^[a-zA-Z0-9]{6,10}$/;
        if (reg.test(password1) == false) {
            password1PromptDiv.html("密码不能含有非法字符，长度在6-10之间").show();
            password1Res= false;
        } else {
            password1PromptDiv.hide();
            password1Res= true;
        }
        return  password1Res;
    }

    let password2Res = false;
    /**
     * 验证确认密码
     * @returns {boolean}
     */
    function checkPassword2() {
        let password1 = $("#password1").val();
        let password2 = $("#password2").val();
        let password2PromptDiv = $("#password2_prompt");
        if (password1 != password2) {
            password2PromptDiv.html("两次输入的密码不一致").show();
            password2Res= false;
        } else {
            password2PromptDiv.hide(3000);
            password2Res= true;
        }
        return password2Res;
    }

    let verifyCodeRes = false;


    /**
     * 用户注册
     */
    function regist() {
        //先检查各字段是否正确
        if(!(accountRes && emailRes && password1Res && password2Res)){
            alert("请输入正确的数据！");
            return ;
        }
        $.ajax({
            url: '${pageContext.request.contextPath}/account/regist',// 获取自己系统后台用户信息接口
            data: $("#userRegistForm").serialize(),  //对表单序列化
            type: "POST",
            dataType: "json",
            success: function (data) {
                if (data) {
                    if (data.code == "200") { //判断返回值，这里根据的业务内容可做调整
                        setTimeout(function () {//做延时以便显示登录状态值
                            alert(data.msg);
                            // 点击确定之后刷新页面
                            location.reload();
                        }, 100)
                        $("#submit").html("正在注册中...");
                        $("#submit").attr("disabled","true");


                    } else {
                        showMsg(data.msg);//显示登录失败的原因
                        return false;
                    }
                }
            },
            error: function (data) {
                showMsg(data.msg);
            }
        })
    }
    //错误信息提醒
    function showMsg(msg) {
        $("#CheckMsg").text(msg);
    }

     /**
      * 批量添加项目
      * @returns {boolean}
      */
     function registUsers() {
         let usersPath = $("#usersPath").val();

         if (usersPath=='') {
             alert("请填写文件磁盘路径！");
             return false;
         }
         $("#sub2").html("正在添加中...");
         $("#sub2").attr("disabled","true");

         $.ajax({
             url: '${pageContext.request.contextPath}/user/registUsers', /*接口域名地址*/
             data: {"xlsxPath":usersPath},
             type: 'POST',
             dataType: "json",
             success: function (res) {
                 if (res.code == 200) {
                     alert(res.msg);
                     location.reload();
                 }
             }
         })
     }

    $("#select").on('change',function(){
        var url = "/projshow/user/getUserByCondition/1/10";
       let status = $(this).val();
        let searchKey = $('#search_key').val();
        let searchValue = $('#search-value').val();

    location.href="/projshow/user/getUserByCondition/1/10?searchKey="+searchKey+"&searchValue"+searchValue+"&s="+status;

    })

</script>
</body>
</html>